<template>
  <a-drawer
    :title="title"
    :width="drawerWidth"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
  >
    <div id="screenViewBox">
      <a-card class="card-header">
        <a-form-model ref="modelForm" :model="model">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item
                labelAlign="left"
                :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapperCol="wrapperCol"
                prop="worksheetNum"
                label="加工单号"
              >
                {{ model.worksheetNum }}
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                labelAlign="left"
                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                :wrapperCol="wrapperCol"
                prop="worksheetQuantity"
                label="加工单数量"
              >
                {{ model.worksheetQuantity }}
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item
                labelAlign="left"
                :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                :wrapperCol="wrapperCol"
                prop="outStoreNum"
                label="出库单号"
              >
                {{ model.outStoreNum }}
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                labelAlign="left"
                :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                :wrapperCol="wrapperCol"
                prop="equipmentName"
                label="机台"
              >
                {{ model.equipmentName }}
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>

      <!-- 表格区域 -->
      <a-card class="card-content">
        <div class="requiredNews">计划用料</div>
        <br />
        <a-table
          :columns="columns"
          :data-source="model.planMaterialList"
          :loading="loading"
          :pagination="false"
          :rowKey="(record, index) => record.id"
        >
        </a-table>
      </a-card>
      <a-card class="card-content">
        <div>
          <div class="requiredNews">出库明细</div>
        </div>
        <br />
        <a-table
          :columns="wareDesColumns"
          :data-source="tmpMaterialPrepareList"
          :loading="loading"
          :pagination="false"
          :rowKey="(record, index) => record.shelfGoodsNumId"
        >
        </a-table>
      </a-card>

      <a-card class="card-content">
        <div>
          <div class="requiredNews">加工单二维码</div>
        </div>
        <br />
        <div id="qrCode">
          <vue-qr
            :text="qrModel.text"
            :size="200"
            :margin="0"
            colorDark="black"
            colorLight="white"
          ></vue-qr>
          <div class="labelBox" v-if="qrModel.label !== ''">
            {{ qrModel.label }}
          </div>
        </div>
      </a-card>
    </div>
    <a-button type="primary" @click="savePoster('screenViewBox', '商品明细')"
      >保存为图片</a-button
    >
  </a-drawer>
</template>

<script>
import api from "@/api/apiServer";
import { columns, wareDesColumns } from "./tableConfig";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";

import VueQr from "vue-qr";
import { savePoster } from "@/unit/tool";
export default {
  mixins: [tableMinxins],
  components: { VueQr },
  data() {
    return {
      columns,
      visible: false,
      drawerWidth: 900,
      title: "商品明细",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      model: {},
      tmpMaterialPrepareList: [],
      wareDesColumns,
      qrModel: {}
    };
  },
  methods: {
    savePoster,
    showDrawer(record) {
      if (record.workSheetId) {
        this.getExstockDetailed(record);
      }
    },
    // 获取商品明细
    async getExstockDetailed(record) {
      const res = await api.OutStoreGoodsDetail({
        workSheetId: record.workSheetId,
        outStoreNum: record.outStoreNum
      });
      this.model = res.data;
      this.model.outStoreNum = record.outStoreNum;
      this.model.equipmentName = record.equipmentName;
      this.qrModel.text = JSON.stringify({
        processNum: res.data.worksheetNum,
        id: record.workSheetId,
        goodsId: res.data.worksheetGoodsId
      });
      this.qrModel.label = res.data.worksheetNum;
      this.getTmpMaterialPrepareRecord();
    },
    // 获取出库明细
    async getTmpMaterialPrepareRecord() {
      const res = await api.TmpMaterialPrepareRecord({
        outStoreNum: this.model.outStoreNum
      });
      this.tmpMaterialPrepareList = res.data;
      this.$forceUpdate();
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.model = Object.assign({});
      this.current = 1;
    }
  }
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
button {
  margin-right: 13px;
}
.card-content {
  margin-bottom: 20px;
  .contetnBox {
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;
    .headerBox {
      padding: 0 20px;
    }
  }
}
.ant-form-item {
  margin: 10px 0;
}
.tableSpan {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
}

.footer-btn {
  width: 100%;
  text-align: center;
  margin: 37px 0;
  button {
    width: 200px;
    height: 40px;
    background: #1a5eff;
    border-radius: 2px;
  }
}
.requiredNews {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
  margin-bottom: 12px;
}
#screenViewBox {
  padding: 10px;
}

#qrCode {
  text-align: center;
}
.modal-footer {
  text-align: center;
  margin: 20px 0 0 0;
  button {
    margin: 0 20px;
  }
}
.labelBox {
  text-align: center;
  font-size: 20px;
  margin: 20px 0;
}
</style>
